<template>
    <div class="qilin-QilinView beauty-scrollbar-y">
        <div class="qilin-QilinView-header" v-if="!ownViewConfig.headerConfig.hideHeader">
            {{ownViewConfig.headerConfig.headerText || "基本信息" }}
        </div>
        <div class="qilin-QilinView-content">
            <el-row
                :class="[
                    'qilin-QilinView-content-row',
                    ownViewConfig.isTable ? 'qilin-table' : ''
                ]"
            >
                <template
                    v-for="(item,index) in ownViewConfig.itemConfig"
                    :key="item.value || 'view-key'+index "
                >
                    <el-col
                        :span="item.col || 8"
                        v-show="item.isHide ? false :
                            item.isHideFn ? item.isHideFn(item,ownViewConfig.viewData[item.value]) : true
                        "
                        :class="[
                            'qilin-QilinView-content-row-col',
                            item.className
                        ]"
                    >
                        <template v-if="!item.labelEllipsis">
                            <label class="qilin-QilinView-content-row-col-label">
                                <span>{{item.label || "默认label"}}{{item.labelSuffix || ""}}</span>
                            </label>
                        </template>
                        <template v-else>
                            <el-tooltip
                                :placement="item.labelEllipsisPlacement || 'left' "
                                :effect="item.labelEllipsisEffect || 'dark' "
                            >
                                <template v-slot:content>
                                    <span>{{item.label || "默认label"}}{{item.labelSuffix || ""}}</span>
                                </template>
                                <label class="qilin-QilinView-content-row-col-label">
                                    <span class="ellipsis">{{item.label || "默认label"}}{{item.labelSuffix || ""}}</span>
                                </label>
                            </el-tooltip>
                        </template>
                        <span
                            v-if="!item.valueEllipsis"
                            :class="[
                                'qilin-QilinView-content-row-col-value'
                            ]"
                        >
                            <template v-if="!item.type || item.type === 'text' ">
                                <span>
                                    {{ownViewConfig.viewData[item.value]?ownViewConfig.viewData[item.value]:"-"}}
                                </span>
                            </template>
                            <template v-else-if="item.type === 'image' ">
                                <template v-if="ownViewConfig.viewData[item.value] && ownViewConfig.viewData[item.value].length > 0 ">
                                    <span
                                        v-for="(imgItem,imgIndex) in ownViewConfig.viewData[item.value]"
                                        :key="imgItem.url || 'image-key-'+imgIndex "
                                    >
                                        <el-image
                                            :src="imgItem.url"
                                            :preview-src-list="ownViewConfig.viewData[item.value].map((ite)=>{return ite.url})"
                                            :initial-index="ownViewConfig.viewData[item.value].findIndex((ite)=>{return imgItem.url === ite.url})"
                                            fit="fill"
                                        ></el-image>
                                    </span>
                                </template>
                                <span v-else>暂无图片</span>
                            </template>
                            <template v-else-if="item.type === 'date' ">
                                <span>{{getDate(ownViewConfig.viewData[item.value],item.format || "")}}</span>
                            </template>
                            <template v-else-if="item.type === 'link' ">
                                <span v-if="ownViewConfig.viewData[item.value]" class="link"
                                    @click="item.click && item.click(item,ownViewConfig.viewData[item.value])"
                                >
                                    {{ownViewConfig.viewData[item.value]}}
                                </span>
                                <span v-else>{{"-"}}</span>
                            </template>
                            <template v-else-if="item.type === 'slot' ">
                                <slot :name="item.slotName" :data="{item,data:ownViewConfig.viewData[item.value]}"></slot>
                            </template>
                        </span>
                        <template v-else>
                            <el-tooltip
                                :placement="item.valueEllipsisPlacement || 'top' "
                                :effect="item.valueEllipsisEffect || 'dark' "
                            >
                                <template v-slot:content>
                                    <span>
                                        {{ownViewConfig.viewData[item.value]?ownViewConfig.viewData[item.value]:"-"}}
                                    </span>
                                </template>
                                <span class="qilin-QilinView-content-row-col-value">
                                    <span class="ellipsis">{{ownViewConfig.viewData[item.value]?ownViewConfig.viewData[item.value]:"-"}}</span>
                                </span>
                            </el-tooltip>
                        </template>
                    </el-col>
                </template>
            </el-row>
        </div>
    </div>
</template>

<script setup>
import Qilin from "qilin-utils";
// 接收来自父组件的传参
const propsValue=defineProps({
    viewConfig:{
        type:Object,
        default(){
            return {
                isTable:false, //是否为表格形式
                headerConfig:{
                    hideHeader:false, //是否隐藏头部标题部分元素
                    headerText:"", //头部标题内容
                },
                itemConfig:[
                    {
                        type:"text", //显示数据类型
                        textarea:false, //text类型是否是textarea
                        slotName:"", //slot元素的name，当且仅当type为slot时需要
                        format:"", //显示日期格式配置项，当且仅当type为date时需要
                        label:"姓名", //显示label字段名称
                        value:"name", //显示数据名称--对应viewData
                        col:8, //栅栏格数--默认8
                        className:"", //额外添加在el-col元素上的类名
                        labelSuffix:"", //label名称后缀符号，默认为空字符串
                        labelEllipsis:false, //若label名过长是否设置隐藏悬浮显示--默认false
                        labelEllipsisPlacement:"left", //label超出长度悬浮提示位置
                        labelEllipsisEffect:"dark", //label超出长度悬浮提示样式类型
                        valueEllipsis:false, //若value数据过长是否设置隐藏悬浮提示--默认false
                        valueEllipsisPlacement:"top", //value数据超出长度悬浮提示位置
                        valueEllipsisEffect:"dark", //value数据超出长度悬浮提示样式类型
                        isHide:false, //是否显示该项
                        click:"", //点击事件
                        isHideFn:"", //判断当前项是否隐藏的方法
                    }
                ],
                viewData:{
                    name:"我是你爹我是你爹我是你爹我是你爹我是你爹我是你爹"
                }
            }
        }
    }
});

// 暴露父组件自定义方法
const emits=defineEmits(["update:viewConfig"])

// 组件自身的配置项
const ownViewConfig=computed({
    get(){
        return propsValue.viewConfig;
    },
    set(val){
        emits("update:viewConfig",val);
    }
});
const getDate=computed(()=>{
    return function(date,format){
        if(!date){
            return "-";
        };
        return Qilin.Date.formatDate(date,format);
    };
});


</script>

<style lang="scss" scoped>
.qilin-QilinView{
    width:100%;
    // max-height:500px;
    // height:100%;
    >.qilin-QilinView-header{
        padding-bottom:15px;
        border-bottom:1px solid $border-color;
        color:$text-color-85;
        font-weight:bolder;
    }
    >.qilin-QilinView-content{
        padding:20px;
        >.qilin-QilinView-content-row{
            >.qilin-QilinView-content-row-col{
                width:100%;
                margin-bottom:20px;
                display:flex;
                align-items:center;
                >.qilin-QilinView-content-row-col-label{
                    display:flex;
                    align-items:center;
                    color:$text-color-85;
                    height:100%;
                }
                >.qilin-QilinView-content-row-col-value{
                    flex:1;
                    color:$text-color-65;
                    >span{
                        display:inline-block;
                        height:auto;
                        cursor:default;
                        >.el-image{
                            width:100px;
                            height:100px;
                            margin:5px;
                            border-radius:4px;
                        }
                        &.link{
                            color:$primary-text-color;
                            cursor:pointer;
                            // text-decoration: underline;
                        }
                    }
                }
            }
            &.qilin-table{
                border:1px solid $border-color;
                border-left:none;
                overflow:hidden;
                border-radius:6px;
                >.qilin-QilinView-content-row-col{
                    display:flex;
                    border:1px solid $border-color;
                    border-left:none;
                    border-right:none;
                    border-bottom:none;
                    margin-top:-1px;
                    margin-bottom:0;
                    display:flex;
                    align-items:center;
                    &:first-of-type{
                        border-radius:6px 0 0 0;
                        >.qilin-QilinView-col-label{
                            border-radius:6px 0 0 0;
                        }
                    }
                    >.qilin-QilinView-content-row-col-label{
                        border-left:1px solid $border-color;
                        border-right:1px solid $border-color;
                        padding: 10px 12px;
                        display:flex;
                        align-items:center;
                        width:50%;
                        color:$text-color-85;
                        background-color:#FAFAFA;
                        height:100%;
                        >span{
                            &.ellipsis{
                                display:inline-block;
                                width:100%;
                                white-space:nowrap;
                                overflow:hidden;
                                text-overflow:ellipsis;
                            }
                        }
                    }
                    >.qilin-QilinView-content-row-col-value{
                        width:50%;
                        color:$text-color-65;
                        padding:10px;
                        >span{
                            &.ellipsis{
                                display:inline-block;
                                width:100%;
                                white-space:nowrap;
                                overflow:hidden;
                                text-overflow:ellipsis;
                            }
                        }
                    }
                    &.el-col-24{
                        >label{
                            width:16.665%;
                        }
                        >span{
                            width:83.335%;
                        }
                    }
                    &.el-col-16{
                        >label{
                            width:25%;
                        }
                        >span{
                            width:75%;
                        }
                    }
                    &.el-col-12{
                        >label{
                            width:33.333%;
                        }
                        >span{
                            width:66.667%;
                        }
                    }
                    &.el-col-8{
                        >label{
                            width:50%;
                        }
                        >span{
                            width:50%;
                        }
                    }
                    &.el-col-6{
                        >label{
                            width:66.5%;
                        }
                        >span{
                            width:33.5%;
                        }
                    }
                }
            }
        }
    }
}
</style>
